<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<pre>
      Vue 将数组方法进行了进一步的封装，产生了两类方法：变异方法、替换数组

      
      变异方法：
        变异方法具有响应式的功能，可以直接对数据进行修改，并影响数据
        就是说，使用这些方法对 data 中数据修改以后，能够直接触发视图更新

        push()、pop()、shift()、unshift()、splice()、sort()、reverse()


      替换数组：
        不会触发视图更新，会产生一个新数组，需要把新数组赋值给 data 中的数据，视图才会更新

        filter()、concat()、slice()

      filter()、findIndex()、some()的异同点
    
    </pre>

		<div id="app">
			<p v-for="(item, index) in arr" :key="index">{{ item }}</p>

			<button @click="handle">变异方法</button>
			<button @click="handle1">替换数组</button>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					name: '',
					arr: ['汤姆', '杰瑞', '斯派克'],
				},
				methods: {
					handle() {
						this.arr.push('迈克尔')
					},
					handle1() {
						this.arr = this.arr.slice(0, 2)
					},
				},
			})
		</script>
	</body>
</html>
